<template>
<div class="login">
  <div class="formDiv">
    <div class="formChild">
      <div class="bindtitle">关系绑定</div>
      <div class="fz">
      <el-radio-group v-model="radio" size="small">
        <el-radio :label="1" @change="setStu()" border>学生</el-radio>
        <el-radio :label="2" @change="setJia()" border>家长</el-radio>
        <el-radio :label="3" @change="setTea()" border>班主任</el-radio>
      </el-radio-group>
    </div>
  <div style="margin-top: 20px;"  v-show=flag1>
    <el-form :rules="rules" :model="student" label-position="top" ref="stuForm" class="bindForm">
      <el-form-item label="学生姓名" prop="name" style="width: 270px">
        <el-input v-model="student.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone" style="width: 270px">
        <el-input v-model="student.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code" style="width: 270px">
        <el-input v-model="student.code" placeholder="请输入验证码">
          <el-button slot="append" :type="isCounting ? 'text' : 'primary'" style="padding: 0"
                     :loading="isLoading" :disabled="isCounting || isLoading" @click="handleSendValidCode(student.phone)">
            {{ isCounting ? `${countdown}秒重新获取` : '获取验证码' }}
          </el-button>
        </el-input>
      </el-form-item>
      <el-button type="warning" @click="stuForm()" style="width: 80%;">提交</el-button>
    </el-form>
  </div>
  <div style="margin-top: 20px;" v-show=flag2>
    <el-form :rules="rules2" :model="jia" label-position="top" ref="jiaForm"  class="bindForm">
      <el-form-item label="学生姓名" prop="studentName" style="width: 270px">
        <el-input v-model="jia.studentName" placeholder="请输入学生姓名" ></el-input>
      </el-form-item>
      <el-form-item label="学生手机号" prop="studentPhone" style="width: 270px">
        <el-input v-model="jia.studentPhone" placeholder="请输入学生手机号"></el-input>
      </el-form-item>
      <el-form-item label="家长手机号" prop="phone" style="width: 270px">
        <el-input v-model="jia.phone" placeholder="请输入家长手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code" style="width: 270px">
        <el-input v-model="jia.code" placeholder="请输入家长手机验证码">
          <el-button slot="append" :type="isCounting ? 'text' : 'primary'"  style="padding: 0"
            :loading="isLoading" :disabled="isCounting || isLoading" @click="handleSendValidCode(jia.phone)">
            {{ isCounting ? `${countdown}秒重新获取` : '获取验证码' }}
          </el-button>
        </el-input>
      </el-form-item>
      <el-button type="warning" @click="jiaForm()" style="width: 80%;">提交</el-button>
    </el-form>
  </div>
  <div style="margin-top: 20px;" v-show=flag3>
    <el-form :rules="rules3" :model="tea" label-position="top" ref="teaForm"  class="bindForm">
      <el-form-item label="账号" prop="accessNo" style="width: 270px">
        <el-input v-model="tea.accessNo" placeholder="请输入账号" ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" style="width: 270px">
        <el-input v-model="tea.password" placeholder="请输入密码" type="password"></el-input>
      </el-form-item>
      <el-button type="warning" @click="teaForm()" style="width: 80%;">提交</el-button>
    </el-form>
  </div>
    </div>

  </div>

</div>


</template>

<script>
import {setJiaZhang, setStudent, setTeacher,sendValidCode} from "@/api/wechat/bindAccess";
import request from '@/utils/request'

export default {
  name: "Login",
  data() {
    return {
      countdown: 180, // 倒计时初始值，单位为秒
      isCounting: false, // 是否在倒计时
      isLoading: false, // 是否在加载（发送请求）
      radio:"1",
      openId:"1",
      flag1:true,
      flag2:false,
      flag3:false,
      student:{
        name:"",
        phone:"",
        code:"",
        openId:""
      },
      rules:{
        name:[
          {required:true,message:"请输入姓名",trigger:'blur'}
        ],
        phone:[
          {required:true,message:"请输入手机号",trigger:'blur'}
        ],
        code:[
          {required:true,message:"请输入验证码",trigger:'blur'}
        ]
      },
      jia:{
        studentName:"",
        studentPhone:"",
        phone:"",
        code:"",
        openId:""
      },
      rules2:{
        studentName:[
          {required:true,message:"请输入姓名",trigger:'blur'}
        ],
        studentPhone:[
          {required:true,message:"请输入学生手机号",trigger:'blur'}
        ],
        phone:[
          {required:true,message:"请输入家长手机号",trigger:'blur'}
        ],
        code:[
          {required:true,message:"请输入验证码",trigger:'blur'}
        ]
      },
      tea:{
        accessNo:"",
        password:"",
        openId:""
      },
      rules3:{
        accessNo:[
          {required:true,message:"请输入账号",trigger:'blur'}
        ],
        password:[
          {required:true,message:"请输入密码",trigger:'blur'}
        ]
      },
    };
  },
  created() {
    this.radio=1;
    this.getCode();
  },
  // watch: {
  //   // 监听路由变化来更新当前页面路径
  //   '$route': function (to, from) {
  //     this.url = to.path;
  //   }
  // },
  methods: {
    setStu() {
      this.flag1 = true;
      this.flag2 = false;
      this.flag3 = false;
      this.reset();
    },
    setJia() {
      this.flag2 = true;
      this.flag1 = false;
      this.flag3 = false;
      this.reset();
    },
    setTea() {
      this.flag3 = true;
      this.flag2 = false;
      this.flag1 = false;
      this.reset();
    },
    stuForm() {
      this.$refs.stuForm.validate(valid => {
        if (valid) {
          this.student.openId = this.openId;
          setStudent(this.student).then(response => {
            if(response.code === 200) {
              alert("绑定成功");
            }else {
              alert(response.message)
            }
          })
        } else {
          return false;
        }
      })
    },
    jiaForm() {
      this.$refs.jiaForm.validate(valid => {
        if (valid) {
          this.jia.openId = this.openId;
          setJiaZhang(this.jia).then(response => {
            if(response.code === 200) {
              alert("绑定成功");
            }else {
              alert(response.message);
            }
          })
        } else {
          return false;
        }
      })
    },
    teaForm() {
      this.$refs.teaForm.validate(valid => {
        if (valid) {
          this.tea.openId = this.openId;
          setTeacher(this.tea).then(response => {
            if(response.code === 200) {
              alert("绑定成功");
            }else {
              alert(response.message)
            }
          })
        } else {
          return false;
        }
      })
    },
    getCode() {
      //获取当前页面路径
      // this.url = this.$route.path;

      //获取微信接口传递的code信息
      this.code = this.$route.query.code;
      console.log(this.$route.query.code)
      request.get('/wx/wxCallback?code=' + this.code).then(async res => {
        this.openId=res.data.openid;
      })
    },
    reset() {
      this.$refs.stuForm.resetFields();
      this.$refs.jiaForm.resetFields();
      this.$refs.teaForm.resetFields();
    },
    handleSendValidCode(phone) {
      if (this.isCounting || this.isLoading) return;
      this.isLoading = true;
      // 调用发送验证码的函数
      sendValidCode(phone).then(res => {
        this.isLoading = false;
        if (res.code === 200) {
          // 如果验证码发送成功，开始倒计时
          this.startCountdown();
        } else {
          alert(res.message);
        }
      }).catch(error => {
        this.isLoading = false;
        console.log('发送验证码失败，请稍后再试。');
      });
    },
    startCountdown() {
      this.isCounting = true;

      const interval = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(interval);
          this.isCounting = false;
          this.countdown = 60; // 重置倒计时
        } else {
          this.countdown -= 1;
        }
      }, 1000);
    },
  }
};
</script>

<style>
.bindForm {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.fz {
  display: flex;
  justify-content: center;
  align-items: center;
}
.row{
  margin: 0 auto;
  padding-left:80px;
  padding-bottom: 20px;
}
.student{
  width: 270px;
  height: 50px;
  background-color: white;
  position: absolute;
  left: 60px;

}
.jiaZhang{
  width: 270px;
  height: 50px;
  background-color: white;
  position: absolute;
  left: 60px;
}
.tea{
  width: 270px;
  height: 50px;
  background-color: white;
  position: absolute;
  left: 60px;
}
.login {
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../../assets/image/dormitorylogin.jpg");
}
.formDiv{
  padding: 10%;
}
.formChild{
  background: #ffffffe6;
  padding-bottom: 20px;

}
.bindtitle {
  text-align: center;
  padding: 30px;
  font-size: 24px;
  font-weight: 600;
}
</style>
